<ul class="nav" id="${id}">
	<li class="dropdown">
		<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="__dd_${id}" data-bind='value: title, click: dropDownClicked'>
		  ${title} <b class="caret"></b>
		</a>
		
		<ul class="dropdown-menu">
		  ${insideBody()}
		</ul>
	</li>
</ul>

<bootstrap:onReady>

	console.log("LOG: %s", 'Component : DropDown ${id} - Begin. !');

	// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
	var __dd_${id}_Model = function () {

		var self = this;

		
		self.title = ko.observable("Bert"),
	    
		self.dropDownClicked = function() {
	    	console.log("LOG: %s - %s", 'DropDown ${id} Clicked : ',self.title());

	    	var event = new $.Event();
	    	event.type          = "dropDownClicked";
	    	event.target        = $("${id}");
	    	event.model         = self;
	    	event.dropDownName = "${id}";
	    	 
            $(document).trigger(event);	    	
	    }


	    self.dropDownItemClicked = function() {
	    	console.log("LOG: %s - %s", 'DropDown Item ${id} Clicked : ',self.title());

	    	var event = new $.Event();
	    	event.type          = "dropDownClicked";
	    	event.target        = $("${id}");
	    	event.model         = self;
	    	event.dropDownName = "${id}";
	    	 
            $(document).trigger(event);	    	
	    }
	    
	}
	
	
	$("#${id}").koApplyBindings(new __dd_${id}_Model());	   

	console.log("LOG: %s", 'Component : DropDown ${id} - End !');
	
</bootstrap:onReady>
